<template>
    <quill-editor
        @change="changeFn"
        v-model="content"
        ref="myQuillEditor">
    </quill-editor>
  </template>
  
  <script>
  import { quillEditor } from "vue-quill-editor"; //调用编辑器
  import 'quill/dist/quill.core.css';
  import 'quill/dist/quill.snow.css';
  import 'quill/dist/quill.bubble.css';
  import bus from '@/assets/evnetBus'

    export default {
      components: {quillEditor},
      data() {
        return {
            // 编辑器
            content:this.defVal,
            editorOption: {
                modules:{
                    toolbar:[
                    ['bold', 'italic', 'underline', 'strike'], //加粗，斜体，下划线，删除线
                    [{ 'header': 1 }, { 'header': 2 }],  // 标题，键值对的形式；1、2表示字体大小
                    [{ 'indent': '-1'}, { 'indent': '+1' }],  // 缩进
                    [{ 'direction': 'rtl' }],    // 文本方向
                    [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
                    [{ 'align': [] }], //对齐方式
                    ['code','code-block'],
                    ['clean'], //清除字体样式
                    ['image','video'] //上传图片、上传视频
                    ]
                }
            },
        }
      },
      props: {
        defVal:String
      },
      methods:{
        changeFn(){
            this.$emit('change',this.content)
        },
      },
      mounted(){
        bus.$on('getCont',(data)=>{
          this.content = data
        })
      },
      created() {
      },
    }
  </script>
  
  <style scoped lang="less">
  </style>
  